<template>
  <div class="payment_container">
    <!--导航栏-->
    <nav-bar :title="hasPayPwd?'设置支付密码':'输入支付密码'"></nav-bar>

    <!-- logo-->
    <div class="logo_container">
      <p class="logo_container_out">
        <i class="fa fa-unlock-alt"></i>
      </p>
    </div>

    <!--提示-->
    <p class="hint" v-if="hasPayPwd">请确认，是否支付</p>
    <p class="hint" v-if="!hasPayPwd">为了您的资金安全，请先设置支付密码</p>


    <p class="prompt">请输入密码</p>
    <van-password-input v-model="payPwdValue" :focused="showKeyboard"
                        @focus="showKeyboard = true;showKeyboard1 = false"/>

    <van-number-keyboard :show="showKeyboard" @blur="showKeyboard = false" @input="onInput" @delete="onDelete"/>

    <!--需要设置支付密码-->
    <div v-if="!hasPayPwd">
      <p class="prompt">请再次确认密码</p>
      <van-password-input v-model="repPwdValue" :focused="showKeyboard1"
                          @focus="showKeyboard1 = true;showKeyboard=false"/>
      <!-- 数字键盘 -->
      <van-number-keyboard :show="showKeyboard1" @blur="showKeyboard1 = false" @input="onInput1" @delete="onDelete1"/>
    </div>

    <!-- 保存按钮-->
    <div class="Complete_button">
      <van-button text="保存" type="primary" block round :loading="flag" @click="onSave" class="btn"/>
    </div>


  </div>
</template>

<script>
import navBar from "@/components/navBar";

export default {
  name: "Payment",
  inject: ["reload"],
  data() {
    return {
      hasPayPwd: "",
      payPwdValue: "",
      repPwdValue: "",
      showKeyboard: false,
      showKeyboard1: false,
      flag: false,
      orderId: this.$route.query.orderId,
    }
  },
  created() {
    this.getHasPayPwd();
  },
  components: {navBar},
  methods: {
    //组件一加载就判断是否设置支付密码
    async getHasPayPwd() {
      let userId = this.$store.getters.user.userId;
      let res = await this.$axios.post(this.$api.hasPayPwd, {userId: userId});
      if (res.status === 200 && res.data.code === 200) {
        this.hasPayPwd = res.data.hasPayPwd; //返回值为true 或者 false
      } else {
        this.$notify({message: res.data.message});
      }
    },

    // 提交数据
    async onSave() {
      // 开启状态
      this.flag = true;
      // 判断是否输入密码
      if (this.payPwdValue === "") {
        this.$toast("请输入密码");
        this.flag = false;
        return;
      }
      if (!this.hasPayPwd) {
        // 密码长度
        if (this.repPwdValue.length !== 6) {
          this.$toast("请输入6位数密码");
          this.flag = false;
          return;
        }
        // 设置密码的时候
        if (this.repPwdValue === "") {
          this.$toast("请再一次输入密码");
          this.flag = false;
          return;
        }
        // 密码是否相等
        if (this.repPwdValue !== this.payPwdValue) {
          this.$toast("两次输入密码不同");
          this.flag = false;
          return;
        }

        // 发送请求
        let userId = this.$store.getters.user.userId;
        let res = await this.$axios.post(this.$api.setPayPwd, {
          payPwdValue: this.payPwdValue,
          userId: userId,
        });
        this.flag = false;
        if (res.status === 200 && res.data.code === 200) {
          this.$toast("设置成功");
          setTimeout(() => {
            this.reload();
          }, 200);
        } else {
          this.$toast(res.data.message);
        }
      } else {
        //输入密码
        if (this.payPwdValue.length !== 6) {
          this.$toast("请输入6位数密码");
          return;
        }
        let userId = this.$store.getters.user.userId;
        //发送请求验证支付密码是否正确
        let validResult = await this.$axios.post(this.$api.validPayPwd, {
          userId: userId,
          payPwdValue: this.payPwdValue
        });

        //验证密码通过
        if (validResult.status === 200 && validResult.data.code === 200) {
          // 密码验证通过实现订单的转态修改
          let res = await this.$axios.post(this.$api.setOrderPayment, {orderId: this.orderId});
          if (res.status === 200 && res.data.code === 200) {
            this.$dialog.alert({title: "提示", message: "支付成功，我们会尽快未您发货"}).then(() => {
              this.$router.push("/userIndex");
            });
          } else {
            this.$toast( res.data.message);
          }
        } else {
          this.payPwdValue = "";
          this.$toast( validResult.data.message);
        }
      }
    },


    // 键盘的输入与删除
    onInput(key) {
      this.payPwdValue = (this.payPwdValue + key).slice(0, 6);
    },
    onDelete() {
      this.payPwdValue = this.payPwdValue.slice(0, this.payPwdValue.length - 1);
    },
    onInput1(key) {
      this.repPwdValue = (this.repPwdValue + key).slice(0, 6);
    },
    onDelete1() {
      this.repPwdValue = this.repPwdValue.slice(0, this.repPwdValue.length - 1);
    }
  }
}
</script>

<style scoped lang="less">
.payment_container {

  .van-password-input {
    li {
      border: 1px solid #333333;
      border-right: none;

      &:last-child {
        border: 1px solid #333333;
      }
    }
  }

  .logo_container {
    margin-top: 2rem;
    text-align: center;

    .logo_container_out {
      margin: 0;
      display: inline-block;
      width: 4rem;
      height: 4rem;
      background-color: #77D16D;
      text-align: center;
      border-radius: 50%;

      i {
        margin-top: 0.75rem;
        color: white;
        font-size: 2.5rem;
      }
    }
  }

  .hint {
    padding: .2rem;
    font-size: .8rem;
    text-align: center;
  }

  .prompt {
    color: #A6A6A6;
    font-size: .7rem;
    padding-left: 1rem;
  }

  .Complete_button {
    margin-top: 7rem;

    .btn {
      margin-left: 6%;
      width: 88%;
      border: none;
      background: -webkit-linear-gradient(left top, #c6fb95 , #20a1ff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #c6fb95 , #20a1ff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right,  #c6fb95 , #20a1ff); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right,  #c6fb95 , #20a1ff); /* 标准的语法 */
    }

  }
}
</style>